<template>
  <div class="wrap tw-py-16">
    <a-row>
      <a-col
        :xs="{ span: 22, offset: 1 }"
        :md="{ span: 14, offset: 5 }">
        <div>
          <a-row>
            <a-col
              :xs="{ span: 24, offset: 0 }"
              :sm="{ span: 24, offset: 0 }"
              :md="{ span: 24, offset: 0 }"
              :lg="{ span: 12, offset: 0 }"
              class="footer-line tw-mb-4 tw-text-2xl">
              <!-- <i class="icon-youxi" /> -->
            </a-col>
            <a-col
              :xs="{ span: 24, offset: 0 }"
              :sm="{ span: 24, offset: 0 }"
              :md="{ span: 24, offset: 0 }"
              :lg="{ span: 12, offset: 0 }"
              class="tw-text-center sm:tw-text-right">
              <span
                v-for="(link, index) in links"
                :key="index"
                class="tw-text-xl tw-font-light tw-cursor-pointer tw-px-1 hover:tw-text-gray-300 tw-transition-all"
                @click="handleLink(link)">
                <i :class="[link.icon]" />
              </span>
            </a-col>
          </a-row>
          <div class="tw-my-5" style="height: 2px; background-color: rgba(150, 150, 150, .2);" />
          <div class="footer-line tw-text-xs tw-text-gray-500">© 2022 Stone Aeon. All Rights Reserved.</div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
const links = [
  { icon: 'icon-discord', url: 'https://discord.gg/jbjxKs2unp' },
  { icon: 'icon-tuite', url: 'https://twitter.com/StoneAeon' },
  { icon: 'icon-telegram', url: 'https://t.me/StoneAeon' },
  { icon: 'icon-youxiang', url: 'mailto:support@stoneaeon.io' }
]
const handleLink = link => {
  link.url && window.open(link.url)
}
</script>

<style lang="less" scoped>
  .wrap {
    color: #8a8887;
    background-color: #252423;
  }
</style>
